<template>
  <div class="home">
    <!-- top -->
    <TopView name="home" title="首页" msg="欢迎来到我的博客网站，我是 SYCEE"></TopView>

    <!-- 最新推荐 -->
    <div class="recommend">
      <!-- 标题 -->
      <TitleFlagView icon="fa fa-tags" title="最新推荐"></TitleFlagView>

      <!-- 推荐的文章 -->
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in recommendList" :key="item.id">
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="item.firstPicture ? item.firstPicture : 'https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/sky.jpg'" lazy fit="cover" />
            <div class="title" @click="gotoDetail(item)">{{ item.title }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最新文章 -->
    <div class="new">
      <!-- 标题 -->
      <TitleFlagView icon="fa fa-tags" title="最新文章"></TitleFlagView>

      <!-- 文章列表 -->
      <BlogListView :blogs="list"></BlogListView>

      <!-- 分页 -->
      <el-pagination style="margin-bottom: 30px" background layout="prev, pager, next" @current-change="handleCurrentChange" :current-page="currPage" :page-size="pageSize" :total="total"> </el-pagination>
    </div>
  </div>
</template>

<script>
import indexApi from '@/api/home'
import TopView from '@/components/TopView.vue'
import TitleFlagView from '@/components/TitleFlagView.vue'
import BlogListView from '@/components/BlogListView.vue'
export default {
  name: 'HomeView',
  components: {
    TopView,
    TitleFlagView,
    BlogListView
  },
  data() {
    return {
      currPage: 1,
      pageSize: 10,
      total: 0,
      recommendList: [],
      list: []
    }
  },
  created() {
    this.getRecommendList()
    this.getAllList()
  },
  methods: {
    getRecommendList() {
      indexApi.getRecommend().then(res => {
        this.recommendList = res.data.data
      })
    },

    gotoDetail(blog) {
      const form = new FormData()
      form.append('id', blog.id)
      form.append('views', blog.views)

      indexApi.updateViews(form).then(response => {
        if (response.code === 20000) {
          this.$router.push({
            path: '/detail',
            query: blog
          })
        }
      })
    },

    getAllList() {
      indexApi
        .getList({
          pageNum: this.currPage,
          pageSize: this.pageSize
        })
        .then(res => {
          this.total = res.data.data.total
          this.list = res.data.data.records
        })
    },

    handleCurrentChange(val) {
      this.currPage = val
      this.getAllList()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-card {
  border: 0;
}

.home {
  width: 100%;
  height: auto;

  .recommend {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.95;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;

    .el-image {
      width: 100%;
      height: 200px;
      position: relative;
      vertical-align: middle;
      max-width: 100%;
      background-color: transparent;
    }
    .title {
      padding: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      cursor: pointer;
    }
  }

  .new {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
  }
}
</style>
